<template>
  <div>
    <div id="salesTrendEcharts" style="width: 100%; height: 230px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
onMounted(() => {
  handleSalesTrendEcharts()
})
const handleSalesTrendEcharts = () => {
  const salesTrendEcharts = echarts.init(document.getElementById('salesTrendEcharts'))
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0%',
      right: '2%',
      bottom: '0%',
      top: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          interval: 0 //强制显示所有标签
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#DDD'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333'
          }
        },
        nameTextStyle: {
          color: '#999'
        },
        splitArea: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '价格',
        type: 'line',
        data: [0, 60, 20, 36, 23, 85],
        lineStyle: {
          normal: {
            width: 2,
            color: {},
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#fff',
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 100,*/
            borderColor: '#A9F387'
          }
        },
        smooth: true
      }
    ]
  }

  // 在这里手动触发显示tooltip
  // setTimeout(() => {
  //   salesTrendEcharts.dispatchAction({
  //     type: 'showTip',
  //     seriesIndex: 0,
  //     dataIndex: 1 //默认显示第一个数据项
  //   })
  // }, 0)

  // 在鼠标移开时触发 showTip
  salesTrendEcharts.getZr().on('globalout', function () {
    setTimeout(() => {
      salesTrendEcharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0, // 对应你的 series 中的索引
        dataIndex: 1 //默认显示
      })
    }, 0)
  })
  salesTrendEcharts.setOption(option)
}
</script>

<style scoped></style>
